<template>
    <s-box title="专家合作分析" :span="6" :rows="2" ref="loading">
        <div class="chart-box">
            <div class="chart-wrap" ref="chart" ></div>
        </div>
    </s-box>
</template>
<script>
import delegate from '../js/event.js';
import echarts from "echarts";
import data2 from "./guanxi.json";
import mixin from '../js/mixin.js';

const  COLOR = ['#9a6728','#00a8ff','#0d5a35','#b40177','#1490ae','#00ff00'];
const  CATEGORYLIST = ['热词','专家','机构','技术新闻动态','论文','专利'];
export default {
    mixins:[mixin],
    data() {
        return {
           nodes:[],
           edges:[],
           data2
        }
    },
    beforeDestroy(){
         // 解除事件绑定
        delegate.$off('s-resize',this._initChart);
        delegate.$off('s-search',this._initSearch);
    },
    mounted(){
        // 初始化事件
        this._initMethod();
    },
    methods: {
        _initMethod() {
            // 搜索
            delegate.$on('s-search',this._initSearch)
            // 重制
            delegate.$on('s-resize',this._initChart)
        },
        _initSearch(obj) {
            console.log(obj)
        },
        getItemProperty(id){
           let colorList = COLOR;
           let categoryList = CATEGORYLIST;
           let idsList = ['author','org','tech','paper','patent'];
           let index = -1;
           idsList.some((item,_index) => {
                if( (id+'').indexOf(item) >= 0 ){
                    index = _index;
                    return true;
                }
           });
           let current = index+1;
           return {color:colorList[current],category:categoryList[current]}

        　　//var colorStr=Math.floor((0.1+Math.random())*0xFFFFFF).toString(16).toUpperCase();
        　　//return "#"+"000000".substring(0,6-colorStr)+colorStr;
        },
        _setChartOption(){
            let myChart = echarts.init(this.$refs.chart);
            let $this = this;
                myChart.showLoading();
                myChart.hideLoading();
                myChart.setOption(
                {
                    color:COLOR,
                    animationDurationUpdate: 1500,
                    animationEasingUpdate: "quinticInOut",
                    tooltip: {},
                    legend: [{
                        //selectedMode: 'single',
                        left:'10',
                        data: ['专家'],
                        textStyle:{
                            color:'#fff'
                        }
                    }],
                    series: [
                    {
                        type: "graph",
                        layout: "force",
                        // progressiveThreshold: 700,
                        force : { //力引导图基本配置
                            //initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
                            repulsion : 100,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
                            gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                            edgeLength :80,//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
                            layoutAnimation : true
                        //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
                        },
                        categories: CATEGORYLIST.map((item)=>{
                            return {
                                name: item
                            }
                        }),
                        data: $this.nodes,
                        draggable:true,
                        edges: $this.edges,
                        symbolSize: 30,
                        label: {
                        show:true,
                        emphasis: {
                            position: "inside",
                            show: true
                        }
                        },
                        roam: true,
                        focusNodeAdjacency: true,
                        lineStyle: {
                            color: 'source',
                            curveness: 0.3
                        },
                        emphasis: {
                            lineStyle: {
                                width: 6
                            }
                        }
                    }
                    ]
                },
                true
                );
        },
        _maxSize(nodelist){
            let MAXSIZE = 1;
            nodelist.forEach(node => {
                if(!node.size){
                    node.size = 1;
                }
                if(node.size >= MAXSIZE){
                    MAXSIZE = node.size
                }
            })
            return MAXSIZE;
        },
        _symbolSize(n,max){
            let SISE = 30;
            let per = n / max;
            let symbolSize = per*SISE >= SISE*0.2 ? parseInt(per*SISE) : 20 ;
            return symbolSize
        },
        allAuthorCooperateNet(){
            if(!this.navCurrentId) return;
                    this.nodes = [];
                    this.edges = [];
                    this.api({
                            url: "authoranalyse/allAuthorCooperateNet",
                            method: "post",
                            data:`topicId=${this.navCurrentId}`
                    }).then(data => {
                        this.$refs.loading.hide();
                        let $this = this;
                        let MAXSIZE = $this._maxSize(data.nodes);

                        data.nodes.map(function(node) {
                            node.symbolSize = $this._symbolSize(node.size , MAXSIZE)
                            let {category ,color } = $this.getItemProperty(node.id);
                            var datanode = {
                                // x: parseInt(Math.random()*800),
                                // y: parseInt(Math.random()*800),
                                category:category,
                                id: node.id + '',
                                name: node.label,
                                symbolSize: node.symbolSize ,
                                itemStyle: {
                                    normal: {
                                        color: color
                                    }
                                },
                                label:{
                                    normal: {
                                        show: node.symbolSize > 20
                                    }
                                }
                            };
                            $this.nodes.push(datanode);
                        });

                        data.edges.map(function(edge) {
                            var dataedge =  {
                                source: edge.sourceID + '',
                                target: edge.targetID + '',
                                lineStyle:{
                                    width: 2
                                }
                            };
                             $this.edges.push(dataedge);
                        });

                        this._setChartOption();
                    }).catch((error) =>{ this.$refs.loading.hide()})
        },
        _initChart(){
            this.$refs.loading.show();
             this.$nextTick(() => {
                this._setChartOption();
            });
            this.allAuthorCooperateNet();
        }
    },
}
</script>
<style lang="scss" scoped>
  .chart-box{
      position: relative;
      padding-top: 43%;
  }
  .chart-wrap{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
  }
</style>
